<template>
  <div class="box">
    <van-form
      input-align="right"
      error-message-align="right"
      :show-error-message="false"
      show-error
      scroll-to-error
      validate-first
      @failed="onFailed"
      @submit="onSubmit"
    >
      <van-field
        required
        input-align="right"
        v-model="params.reasonForCancellation"
        label="作废原因"
        placeholder="请输入作废原因"
        :rules="[{ required: true, message: '请输入作废原因' }]"
      />
      <van-button
        round
        block
        type="info"
        color="#37b5b5"
        :loading="loading"
        loading-text="提交中..."
        native-type="submit"
        class="btn"
        >保 存</van-button
      >
    </van-form>
  </div>
</template>
<script>
import { Button, Field, Form, Dialog, Toast } from 'vant'
import { postHandle } from '@/api'
import { getValue } from '@/utils/auth'
export default {
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button
  },
  data() {
    return {
      loading: false,
      params: {
        reasonForCancellation: '',
        id: getValue('invalidId')
      }
    }
  },
  methods: {
    onFailed(errorInfo) {
      Toast(errorInfo.errors[0].message)
    },
    onSubmit(value) {
      this.loading = true
      this.onSave()
      // let imgInfos = this.obj.imgInfos.map((item) => item.url).join(",");
    },
    onSave() {
      Dialog.confirm({
        title: '消费信息作废确认',
        confirmButtonColor: 'black',
        message: '此销售信息作废后不能恢复，确定要作废吗？'
      })
        .then(res => {
          postHandle(`/agri/api/yzbzh/saleInfo/toVoid`, this.params)
            .then(res => {
              this.loading = false
              this.$toast.success(res.msg)
              this.$bridge.call('base.closePage')
            })
            .catch(res => {
              this.loading = false
              this.$toast.success(res.msg)
            })
        })
        .catch(() => {})
    }
  }
}
</script>
<style lang="scss" scoped>
.btn {
  width: 85%;
  position: fixed;
  bottom: 30px;
  left: 8%;
  left: 50%;
  margin-left: -42.5%;
}
</style>
